<template>
    <div class="box">
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Input v-model="searchObj.title" class="search-input" clearable placeholder="请输入标题"/>
                </FormItem>
                <FormItem>
                    <Input v-model="searchObj.remarks" class="search-input" clearable placeholder="请输入备注"/>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="success" @click="search">
                        <Icon type="ios-search"/>
                        搜索
                    </Button>
                </FormItem>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="addBtn">
                        <Icon type="ios-add"/>
                        添加
                    </Button>
                    <Tooltip maxWidth="400" :content="content" transfer>
                        <Icon type="ios-help-circle-outline" style="margin-left: 5px" />
                    </Tooltip>
                </FormItem>
            </Form>
        </Alert>
        <Row type="flex" justify="center">
            <Col span="24">
                <Table border :loading="tableLoading" :columns="tableColumns" :data="tableData" @on-selection-change="tableSelectChange">
                    <template slot="fiels_josn" slot-scope="{ row }">
                        <Tag v-show="item.name!=''" color="default" v-for="(item,index) in JSON.parse(row.fiels_json)" :key="index">{{item.name}}</Tag>
                    </template>
                    <template slot="down_url" slot-scope="{ row }">
                        <div
                        :id="'a'+row.id"
                        :data-clipboard-text="row.down_url+'?id='+row.id"
                        class="copy"
                        title="点击复制"
                        @click="copyActiveCode(row)">
                            <span>{{row.down_url}}?id={{row.id}}</span>
                        </div>
                    </template>
                    <template slot="action" slot-scope="{ row }">
                        <Button type="primary" size="small" class="action-btn" @click="editBtn(row)">编辑</Button>
                        <Button type="info" size="small" class="action-btn" @click="infoBtn(row)">详情</Button>
                        <Button type="error" size="small" class="action-btn" @click="delBtn(row)">删除</Button>
                    </template>
                </Table>
            </Col>
        </Row>
        <Row type="flex" justify="end">
            <Page show-total :current="pageObj.page" :page-size="pageObj.pageSize" :total="pageObj.totalRecord" @on-change="getPageNo"/>
        </Row>
        <option-modal ref="optionModal" :modal-title="modalTitle" :modal-show="modalShow" :modal-type="modalType" :dataObj="modalData" @cancelOption="cancelOption" @saveOption="saveOption"></option-modal>
    </div>
</template>

<script>
import { searchCommonExcel, operationCommonExcel } from '@/api/swoole'
import OptionModal from './components/option-modal'
import Clipboard from 'clipboard'
export default {
  components: { OptionModal },
  data () {
    return {
      content: 'Java返回格式不能带分页，返回格式为：{errcode: 200, data: [,…], errmsg: "okk"}',
      searchObj: {},
      modalShow: false,
      modalTitle: '',
      modalType: '',
      modalData: {},
      pageObj: {
        page: 1,
        pageSize: 10,
        totalRecord: 0
      },
      tableColumns: [
        {
          type: 'index',
          width: 70,
          title: '序号',
          align: 'center'
        },
        {
          title: '标题',
          key: 'title',
          width: 200,
          align: 'center'
        },
        {
          title: '表头',
          slot: 'fiels_josn',
          width: 300,
          align: 'center'
        },
        {
          title: '原始Url',
          key: 'original_url',
          width: 300,
          align: 'center'
        },
        {
          title: '下载Url',
          slot: 'down_url',
          width: 300,
          align: 'center'
        },
        {
          title: '备注',
          key: 'remarks',
          width: 300,
          align: 'center'
        },
        // {
        //   title: '状态',
        //   key: 'state',
        //   width: 100,
        //   align: 'center'
        // },
        {
          title: '操作',
          minWidth: 200,
          slot: 'action',
          align: 'center'
        }
      ],
      tableData: [],
      selectData: [],
      tableLoading: false
    }
  },
  methods: {
    copyActiveCode (row) {
      console.log('点了一下')
      const clipboard = new Clipboard('#a' + row.id)
      clipboard.on('success', e => {
        this.$Message.success({
          content: '复制成功'
        })
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        this.$Message.error({
          content: '复制失败'
        })
        clipboard.destroy()
      })
    },
    search () {
      this.init()
    },
    addBtn () {
      this.modalTitle = '添加'
      this.modalType = 'add'
      this.modalData = {}
      this.modalShow = true
    },
    editBtn (val) {
      this.modalTitle = '编辑'
      this.modalType = 'edit'
      this.modalData = this.$common.xeUtils.clone(val)
      this.modalShow = true
    },
    infoBtn (val) {
      this.modalTitle = '详情'
      this.modalType = 'info'
      this.modalData = this.$common.xeUtils.clone(val)
      this.modalShow = true
    },
    delBtn (val) {
      this.$Modal.confirm({
        title: '确认删除此数据么？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          this.deleteOne(val)
        }
      })
    },
    tableSelectChange (val) {
      this.selectData = val
    },
    init () {
      let data = {
        page: this.pageObj.page,
        pageSize: this.pageObj.pageSize,
        title: this.searchObj.title,
        remarks: this.searchObj.remarks }
      this.tableLoading = true
      searchCommonExcel(data).then(ret => {
        let data = ret.data
        if (data.errcode === 200) {
          this.tableLoading = false
          this.tableData = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    getPageNo (page) {
      this.pageObj.page = page
      const param = {
        page: this.pageObj.page,
        pageSize: this.pageObj.pageSize,
        name: this.$common.xeUtils.trim(this.searchObj.name),
        card_no: this.$common.xeUtils.trim(this.searchObj.card_no)
      }
      this.init(param)
    },
    cancelOption () {
      this.modalShow = false
    },
    saveOption () {
      this.modalShow = false
      this.init()
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    deleteOne (val) {
      operationCommonExcel({ id: val.id, del_flag: 1 }).then(ret => {
        let data = ret.data
        if (data.errcode === 200) {
          this.$Modal.remove()
          this.success('删除成功')
          this.init()
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    }
  },
  mounted () {
    const param = {
      page: this.pageObj.page,
      pageSize: this.pageObj.pageSize
    }
    this.init(param)
  }
}
</script>

<style scoped>
    .ivu-form-item {
        margin-bottom: 0;
    }

    .box {
        margin-bottom: 50px;
    }
    .action-btn{
        margin-left: 5px;
    }
    .copy{
        cursor:pointer
    }
</style>
